<template>
  <view>
    <u-popup
      class="stylePopup"
      v-model="showPopupDialog"
      @close="closeDialog"
      mode="center"
      border-radius="20"
      :mask-close-able="false"
      :custom-style="{ background: 'transparent' }"
    >
      <view class="styleContainer">
        <image class="style-logo" :src="srcCover"></image>
      </view>
      <view class="style-close-container">
        <image class="style-close" :src="srcCloseDialog" @click="closeDialog"></image>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  props: {},
  data() {
    return {
      showPopupDialog: false,
      srcCover: this.$imgBaseSelf + 'careerPath/welcomeImgNew.png',
      srcCloseDialog: this.$imgBaseSelf + 'login/close_dialog.webp'
    };
  },
  methods: {
    setVisibility(visibility) {
      this.showPopupDialog = visibility;
    },
    closeDialog() {
      this.showPopupDialog = false;
      this.$emit('close');
    }
  }
};
</script>
<style lang="scss" scoped>
.stylePopup {
  .styleContainer {
    width: 560rpx;
    height: 700rpx;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20rpx;

    .style-logo {
      width: 100%;
      height: 100%;
      border-radius: 20rpx;
    }
  }

  .style-close-container {
    display: flex;
    justify-content: center;
    margin-top: 68rpx;

    .style-close {
      width: 104rpx;
      height: 104rpx;
    }
  }
}
</style>
